<template>
	<view>
		<view class="top">
			<view class="box flex-ac">
				<view class="headImg">
					<gui-imageLoading width="120" height="120" borderRadius="50%" :src="vuex_userInfo.headPortrait" mode="aspectFill" :showOpacity="true"></gui-imageLoading>
				</view>
				<view class="info flex-dc">
					<view class="title flex-ac">
						<text class="f32">{{vuex_userInfo.username}}</text>
						<view class="btn f20 cfff" v-if="vuex_userInfo.isVip!=1">未开通会员</view>
					</view>
					<text class="phone f24 c333">{{$u.hidePhone(vuex_userInfo.phone,3,4)}}</text>
					<text class="time f24 c333" v-if="vuex_userInfo.isVip==1">有效期：{{vuex_userInfo.vipTime}}</text>
				</view>
			</view>
		</view>
		<view class="vip-list">
			<view class="item flex-ac-jb bgfff" v-for="(item,index) in vipList" :key="item.id">
				<view class="time-img bold">
					<image src="../../static/user/vipTime.png" mode="widthFix" style="height: auto;"></image>
					<text class="desc f24 cred">{{item.abbreviation}}</text>
					<text class="time f20 cfff">{{item.day>365?'永久':item.day}}</text>
				</view>
				<view class="info flex1 flex-dc bold">
					<text>{{item.name}}</text>
					<text class="f32 cred">￥{{item.money}}</text>
				</view>
				<view class="saveBtn radius15" v-if="!item.isBuy" @tap="handleOrder(item)">立即购买</view>
			</view>
		</view>
		<view class="vipDesc c999 f22">
			<jyf-parser :html="agreement.content" ref="article"></jyf-parser>
		</view>
	</view>
</template>

<script>
	import wx from '@/common/jweixin-module-master/lib/index.js';
	export default {
		data() {
			return {
				vipList:[],
				agreement:{},//充值说明
			}
		},
		onLoad() {
			console.log('vuex_userInfo',this.vuex_userInfo);
			this.getData()
			this.getAgreement()
			this.wxInfo()
		},
		methods: {
			wxInfo() {
				var windowHref = window.location.href;
				this.$http.get('/api/wx/parameter?url=' + encodeURIComponent(window.location.href.split('#')[0])).then(
					res => {
						console.log('注入结果', res.data);
						let resultWx = res.data
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: resultWx.appId, // 必填，公众号的唯一标识
							timestamp: resultWx.timestamp, // 必填，生成签名的时间戳
							nonceStr: resultWx.nonceStr, // 必填，生成签名的随机串
							signature: resultWx.signature, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						});
						wx.ready(() => {
			
						});
					})
			},
			handleOrder(item){
				this.$http.post('/api/thali/recharge',{
					thaliId:item.id
				}).then(res => {
					let result = res.data
					console.log('支付result',result);
					wx.chooseWXPay({
						appId: result.appId, // 必填，公众号的唯一标识
						timestamp: result
						.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: result.nonceStr, // 支付签名随机串，不长于 32 位
						package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: result.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: result.paySign, // 支付签名
						success: res2 => {
							// 支付成功后的回调函数
							console.log('充值会员',res2)
							this.$u.to('/pages/user/vipSuccess?obj='+JSON.stringify(item))
						},
						cancel: () => {
							// this.$u.msg('用户取消！')
						},
						fail: err => {
							this.$u.msg('fail:' + JSON.stringify(err))
							console.log('fail:' + JSON.stringify(err));
						}
					});
					
				})
			},
			getData(){
				this.$http.get('/api/thali').then(res => {
					let result = res.data
					console.log('套餐',result)
					this.vipList= result
				})
			},
			getAgreement() {
				this.$http.get('/api/protocol', {
					type: 4
				}).then(res => {
					let result = res.data
					console.log('', result)
					this.agreement = result
					this.agreement.content = this.$u.richImg(result.content)
				})
			},
		}
	}
</script>

<style lang="less">
.top{
	position: relative;
	background: linear-gradient( 180deg, #FF7272 0%, #FF0019 100%);
	height: 180rpx;
	.box{
		position: absolute;
		left: 25rpx;
		bottom: -90rpx;
		background: url(../../static/user/vipBg.png) no-repeat;
		background-size: 100% 100%;
		width: 700rpx;
		height: 256rpx;
		border-radius: 10rpx;
		padding-left: 25rpx;
		.headImg{
			width: 120rpx;
			height: 120rpx;
			border: 2px solid #fff;
			border-radius: 50%;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.info{
			.title{
				.btn{
					padding: 4rpx 8rpx;
					background: linear-gradient( 180deg, #FFB272 0%, #FF7400 100%);
					margin-left: 15rpx;
					border-radius: 4rpx;
				}
			}
			.phone{
				margin: 15rpx 0 8rpx 0;
			}
			.time{}
		}
	}
}

.vip-list{
	padding: 100rpx 25rpx 30rpx 25rpx;
	.item{
		margin-top: 10rpx;
		padding: 33rpx 25rpx 44rpx 25rpx;
		.time-img{
			position: relative;
			width: 142rpx;
			image{
				width: 142rpx;
			}
			.desc{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 35rpx;
			}
			.time{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 15rpx;
			}
		}
		.info{
			margin:0 30rpx;
			.cred{
				margin-top: 20rpx;
			}
		}
		.saveBtn{
			width: 128rpx;
			height: 53rpx;
			font-size: 22rpx;
		}
	}
}
.vipDesc{
	padding: 0 25rpx 50rpx 25rpx;
	word-break: break-all;
}
</style>
